<!DOCTYPE html>
<html  style="height: 100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Redis服务器信息</title>

<link href="${basePath}/css/museui/reset.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/css/museui/icons.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/css/museui/stylesheet.css" rel="stylesheet" type="text/css" />
<#include "/common/bootstrap.html">
<script type='text/javascript' src='${basePath}/js/museui/actions.js'></script>
<!--[if lte IE 6]>
<script src="${basePath}/js/museui/ie6png.js" type="text/javascript"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix('img, .icon,.isw-archive,.isw-chat,.isw-graph,.isw-grid,.isw-list,.isw-text_document,.isw-zoom,.text');
    </script>
<![endif]--> 
<style type="text/css">
	P{
		text-align: left;
	}
</style>
<script type="text/javascript">
	//对Date的扩展，将 Date 转化为指定格式的String
	//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
	//年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
	//例子： 
	//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
	//(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
	Date.prototype.Format = function (fmt) { //author: meizz 
	 var o = {
	     "M+": this.getMonth() + 1, //月份 
	     "d+": this.getDate(), //日 
	     "h+": this.getHours(), //小时 
	     "m+": this.getMinutes(), //分 
	     "s+": this.getSeconds(), //秒 
	     "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
	     "S": this.getMilliseconds() //毫秒 
	 };
	 if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	 for (var k in o)
	 if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	 return fmt;
	}
</script>
</head>
<body style="height: 100%;">
	<div class="col-md-12">
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	    <div id="main" style="height:600px;"></div>
		<!-- ECharts单文件引入 -->
    	<script src="${basePath}/echarts/echarts.js"></script>
    	<script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '${basePath}/echarts/'
            }
        });
        var echarts;
        var myChart;
     // 使用
        require(
            [
                'echarts',
                'echarts/chart/line', // 使用折线图就加载line模块，按需加载
                'echarts/chart/bar'
            ],
            function (ec) {
                echarts = ec;
                // 基于准备好的dom，初始化echarts图表
                myChart = ec.init(document.getElementById('main')); 
                option = {
                	    title : {
                	        text: '内存监控',
                	        subtext: '内存监控'
                	    },
                	    tooltip : {
                	        trigger: 'axis'
                	    },
                	    legend: {
                	        data:['内存监控']
                	    },
                	    toolbox: {
                	        show : true,
                	        feature : {
                	            mark : {show: true},
                	            dataView : {show: true, readOnly: false},
                	            magicType : {show: true, type: ['line', 'bar']},
                	            restore : {show: true},
                	            saveAsImage : {show: true}
                	        }
                	    },
                	    dataZoom : {
                	        show : false,
                	        start : 0,
                	        end : 100
                	    },
                	    xAxis : [
                	        {
                	            type : 'category',
                	            boundaryGap : true,
                	            data : (function (){
                	                var now = new Date();
                	                var res = [];
                	                var len = 1*30*30;
                	                while (len--) {
                	                    res.unshift(now.Format("hh:mm:ss"));
                	                    now = new Date(now - 2000);
                	                }
                	                return res;
                	            })()
                	        }
                	    ],
                	    yAxis : [
                	        {
                	            type : 'value',
                	            scale: true,
                	            name : '内存使用量(byte)',
                	            boundaryGap: [0.2, 0.2]
                	        }
                	    ],
                	    series : [
                	        {
                	            name:'已使用内存',
                	            type:'line',
                	            xAxisIndex: 0,
                	            yAxisIndex: 0,
                	            data:(function (){
                	                var res = [];
                	                var len = 1*30*30;
                	                while (len--) {
                	                    res.push(0);
                	                }
                	                return res;
                	            })()
                	        }
                	    ]
                	};
                	var lastData = 11;
                	var axisData;
                	//clearInterval(timeTicket);
                	timeTicket = setInterval(function (){
                	    lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
                	    lastData = lastData.toFixed(1) - 0;
                	    axisData = new Date().Format("hh:mm:ss");
                	    
                	    $.ajax({
             			   type: "POST",
             			   url: "${basePath}/monitor/getMemory",
             			   success: function(msg){
             				   if(msg.indexOf("M")){
             					   msg = msg.replace("M","");
             				   }
	             			   // 动态数据接口 addData
	                       	   myChart.addData([
	                       	        [
	                       	            0,        // 系列索引
	                       	            msg, // 新增数据
	                       	            false,     // 新增数据是否从队列头部插入
	                       	            false,     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
	                       	            axisData
	                       	        ]
	                       	    ]);
             			   }
             			});
                	    
                	}, 2100);
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
     
     function getMemoryData(){
    	 var data = "";
    	 $.ajax({
			   type: "POST",
			   url: "${basePath}/monitor/getMemory",
			   success: function(msg){
				   if(msg.indexOf("M")){
					   msg = msg.replace("M","");
				   }
				   data = msg;
				   alert(data);
				   return data
			   }
		});
     }
    </script>
		</div>
</body>
</html>
